<template>
	<view class="tagBox">
		<scroll-view :scroll-y="true" class="style">
			<view @click="chooseStyle(item.id)" class="styleItem" v-for="item in styleList" :key="item.id"
				:class="{active:activeStyle==item.id}">
				<u--text align='center' :lines='2' size='24rpx' :text='item.title'></u--text>
			</view>
		</scroll-view>
		<view class="contentBox">
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
				:default-page-no="1" :default-page-size="10" :auto='false'>
				<view class="flex" v-if="!loading">
					<view class="contentItem" v-for="item in data" :key="item.id" @click="jumpDetail(item.id)">
						<image mode="aspectFill" :src="item.thumb_small"></image>
						<view style="width: 100%;">
							<u--text lines='1' :text='item.remark_name' size='24rpx' />
						</view>
					</view>
					<view class="contentItem" v-if="data.length % 2!=0"></view>
				</view>
				<view class="flex" v-else>
					<view class="contentItem" v-for="item in 10" :key="item">
						<view class="Skeleton" style="height: 135rpx;"></view>
						<view style="width: 100%;height: 30rpx;margin-top: 10rpx;" class="Skeleton"/>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('user'),
				loading: true,
				styleList: [],
				activeStyle: 0,
				data: []
			}
		},
		mounted() {
			uni.showLoading({
				title: '加载中...'
			})
			this.$api.Style.List().then(res => {
				this.styleList = [
					{title:'所有',id:0},
					...res.data.styles.data
				]
				this.activeStyle = this.styleList[0].id
				this.$refs.paging.reload()
			}).catch(err => {
				uni.$u.toast(err.message)
				uni.hideLoading()
			})
		},
		methods: {
			chooseStyle(e) {
				this.activeStyle = e
				this.loading=true
				this.$refs.paging.reload()
			},
			query(page, size) {
				let obj = {
					page,
					size,
					style_id: this.activeStyle
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Decorate.List_C(obj).then(res => {
					uni.hideLoading()
					this.$refs.paging.complete(res.data.decorates.data)
					this.loading = false
				})
			},
			jumpDetail(id){
				if(this.userInfo?.is_company_administrator){
					this.$utils.navigateTo({
						url: '/customer_company/detail?id=' + id
					})
				}else{
					this.$utils.navigateTo({
						url: '/customer/detail_c?id=' + id
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tagBox {
		display: flex;
		height: 100%;
	}

	.style {
		width: 200rpx;
		height: 100%;
		background-color: #f5f5f5;
	}

	.styleItem {
		padding: 20rpx;
	}

	.active {
		background-color: #FFF;
	}

	.contentBox {
		flex: 1;
		height: 100%;
	}

	.contentItem {
		width: 240rpx;
		margin-top: 20rpx;
	}

	.flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	image {
		width: 100%;
		height: 135rpx;
		border-radius: 8rpx;
	}
</style>